<template>
  <div class="gpt-manual">
    <h2>GPT 使用手册</h2>
    <p>欢迎使用 GPT 聊天助手！以下是如何使用这个界面的说明：</p>
    <ul>
      <li>点击“创建新对话”开始一个新的对话。</li>
      <li>从左侧面板选择一个已有的对话来继续聊天。</li>
      <li>在输入框中输入你的消息，按回车键发送。</li>
      <li>查看聊天窗口以获取 GPT 的回复。</li>
    </ul>
    <p>如有任何问题，请随时咨询我们的帮助文档或联系客服。</p>

    <!-- 替代为透明卡片设计 -->
    <div class="card-container">
      <div class="card" @click="askQuestion('克服拖延症')">
        <div class="icon">
          <el-icon><school /></el-icon>
        </div>
        <div class="content">
          <p>克服拖延症</p>
        </div>
      </div>

      <div class="card" @click="askQuestion('邀请朋友参加婚礼的消息')">
        <div class="icon">
          <el-icon><message /></el-icon>
        </div>
        <div class="content">
          <p>邀请朋友参加婚礼的消息</p>
        </div>
      </div>

      <div class="card" @click="askQuestion('用于发送每日电子邮件报告的 Python 脚本')">
        <div class="icon">
          <el-icon><document /></el-icon>
        </div>
        <div class="content">
          <p>用于发送每日电子邮件报告的 Python 脚本</p>
        </div>
      </div>

      <div class="card" @click="askQuestion('如何处理孩子们的艺术作品')">
        <div class="icon">
          <el-icon><document /></el-icon>
        </div>
        <div class="content">
          <p>如何处理孩子们的艺术作品</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { School, Message, Document } from '@element-plus/icons-vue';
import { defineEmits } from 'vue';

const emit = defineEmits(['sendMessage']);

const askQuestion = (question) => {
  emit('sendMessage', question);
};
</script>

<style scoped>
.gpt-manual {
  padding: 40px; /* 增加内边距 */
  background-color: #6b788a; /* 增加透明度 */
  color: black;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(171, 178, 191, 0.5); /* 更柔和的阴影 */
  max-width: 900px; /* 增加最大宽度 */
  margin: auto;
  font-size: 18px; /* 增加字体大小 */
}

.gpt-manual h2 {
  margin-bottom: 25px;
  font-size: 28px; /* 增加标题字体大小 */
}

.gpt-manual ul {
  list-style-type: disc;
  margin-left: 30px; /* 增加左边距 */
}

.card-container {
  display: flex;
  justify-content: space-between;
  gap: 30px; /* 增加卡片间距 */
  margin-top: 30px;
}

.card {
  background: rgba(255, 255, 255, 0.12); /* 增加透明度 */
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 15px;
  padding: 30px; /* 增加内边距 */
  width: 240px; /* 增加卡片宽度 */
  text-align: center;
  transition: transform 0.2s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* 增加阴影 */
  cursor: pointer;
}

.card:hover {
  transform: translateY(-5px);
}

.icon {
  margin-bottom: 20px;
}

.icon svg {
  font-size: 50px; /* 增加图标大小 */
  color: #fff;
}

.content p {
  color: #101c2b;
  font-size: 18px; /* 增加文本字体大小 */
  font-weight: 500;
}
</style>
